<template>
  <div>
    <el-select v-model="selectedArea" placeholder="Select area">
      <el-option
        v-for="community in communities"
        :key="community.deptId"
        :label="community.deptName"
        :value="community.deptId"
      ></el-option>
    </el-select>
    <div ref="chart1" style="height: 500px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
import { getHasUserDept } from "@/api/system/dept";
import { communityChartData } from "@/api/system/detail";
import user from "@/store/modules/user";

export default {
  data() {
    return {
      selectedArea: null,

      communities: [],
      chartData: {
        dates: [],
        paper: [],
        plastic: [],
        metal: [],
        glass: [],
        cloth: [],
        totalWeight: [],
        growthRate: [],
      },
    };
  },
  mounted() {
    this.getCommunityPayData();
    this.getCommunity();
    // this.initChart();
  },
  methods: {
    //获取社区选择列表
    getCommunity() {
      getHasUserDept().then((res) => {
        this.communities = res.data;
      });
    },
    //获取社区交易数据
    getCommunityPayData() {
      communityChartData()
        .then((response) => {
          this.chartData = response.data;
          if (this.clearChart == null) {
            this.clearChart();
          } else {
            this.initChart();
          }
        })
        .catch(() => {
          this.chartData = null;
          this.clearChart();
        });
    },
    //更换社区
    async fetchData() {
      let id = {
        deptId: this.selectedArea,
      };
      communityChartData(id)
        .then((response) => {
          this.chartData = response.data;
          if (this.chartData == null) {
            this.clearChart();
          } else {
            this.updateChart();
          }
        })
        .catch(() => {
          this.chartData = null;
          this.clearChart();
        });
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart1);
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: [
            "Paper",
            "Plastic",
            "Metal",
            "Glass",
            "Cloth",
            "Total Weight",
            "Growth Rate",
          ],
        },
        xAxis: {
          type: "category",
          data: this.chartData.dates,
        },
        yAxis: [
          {
            type: "value",
            name: "Quantity",
          },
          {
            type: "value",
            name: "Growth Rate",
            axisLabel: {
              formatter: "{value} %",
            },
          },
        ],
        series: [
          {
            name: "Paper",
            type: "bar",
            data: this.chartData.paper,
          },
          {
            name: "Plastic",
            type: "bar",
            data: this.chartData.plastic,
          },
          {
            name: "Metal",
            type: "bar",
            data: this.chartData.metal,
          },
          {
            name: "Glass",
            type: "bar",
            data: this.chartData.glass,
          },
          {
            name: "Cloth",
            type: "bar",
            data: this.chartData.cloth,
          },
          {
            name: "Total Weight",
            type: "line",
            yAxisIndex: 1,
            data: this.chartData.totalWeight,
          },
          {
            name: "Growth Rate",
            type: "line",
            yAxisIndex: 1,
            data: this.chartData.growthRate,
          },
        ],
      });
    },
    updateChart() {
      this.chart.setOption({
        xAxis: {
          data: this.chartData.dates,
        },
        series: [
          {
            name: "Paper",
            data: this.chartData.paper,
          },
          {
            name: "Plastic",
            data: this.chartData.plastic,
          },
          {
            name: "Metal",
            data: this.chartData.metal,
          },
          {
            name: "Glass",
            data: this.chartData.glass,
          },
          {
            name: "Cloth",
            data: this.chartData.cloth,
          },
          {
            name: "Total Weight",
            data: this.chartData.totalWeight,
          },
          {
            name: "Growth Rate",
            type: "line",
            yAxisIndex: 1,
            data: this.chartData.growthRate,
          },
        ],
      });
    },
    clearChart() {
      this.chart.setOption({
        xAxis: {
          data: [],
        },
        series: [
          {
            name: "Paper",
            data: [],
          },
          {
            name: "Plastic",
            data: [],
          },
          {
            name: "Metal",
            data: [],
          },
          {
            name: "Glass",
            data: [],
          },
          {
            name: "Cloth",
            data: [],
          },
          {
            name: "Total Weight",
            data: [],
          },
          {
            name: "Growth Rate",
            type: "line",
            yAxisIndex: 1,
            data: [],
          },
        ],
      });
    },
  },
  watch: {
    selectedArea() {
      this.fetchData();
    },
  },
};
</script>